<style>
    html,body,ul,li{
        padding: 0;
        margin: 0;
    }

    .control{
        display: none;
    }

    nav{
        height: 100%;
        position: fixed;
        width: 100%;
        height: 60px;
        transition: height 0.7s;
        background: red;
        overflow: hidden;
    }

    .nav-preplace{
        height: 100%;
        height: 60px;
    }

    ul{
        width: 100%;
        list-style: none;
        font-size: 0;
    }

    li{
        flex: 1;
        font-size: 14;
        cursor: pointer;
        position: relative;
        display: inline-block;
        background: green;
        height: 60px;
        width: 100px;
    }

    li:hover{
        background: greenyellow;
    }

    .under_bar{
        z-index: 100;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: yellow;
        width: 100%;
        transform:translate(0,0);
        transition: transform .3s;
    }

    @media (max-width:1000px){

        .control{
            display: block;
            width: 100%;
            height: 60px;
            background: blue;
        }

        .zmopen{
            position: absolute;
            right: 15px;
            top: 15px;
            height: 30px;
            width:30px;
            background: red;
        }

        nav{
            background: rgba(0,0,0,0.7);
        }

        li{
            width: 100%;
        }
        
        .open{
            height: 100%;
        }

    }


</style>

<nav id="nav">
    <div class="control">
        control
        <div id="zmopen" class="zmopen"></div>
    </div>
    <ul>
        <li>主页1
            <div id="under_bar" class="under_bar"></div>
        </li>
        <li>主页2</li>
        <li>主页3</li>
        <li>主页4</li>
    </ul>
</nav>
<div class="nav-preplace"></div>
<h1>123</h1>
<h1>123</h1>
<h1>123</h1>
<h1>123</h1>
<h1>123</h1>
<h1>123</h1>
<h1>123</h1>
<h1>123</h1>
<h1>123</h1>
<h1>123</h1>
<h1>123</h1>
<h1>123</h1>
<h1>123</h1>
<h1>123</h1>
<h1>123</h1>
<h1>123</h1>
<h1>123</h1>
<h1>123</h1>
<h1>123</h1>
<h1>123</h1>

<script>

    [...document.getElementsByTagName('li')].forEach(function(li, index){
        li.addEventListener("click",function(){
            document.getElementById("under_bar").style.transform = `translate(${index * 100}%,0)`
        })
    })

    var open = false;
    document.getElementById("zmopen").addEventListener("click", function(e){
        if(open){
            document.getElementById("nav").className = ""
        } else {
            document.getElementById("nav").className = "open"
        }
        open = !open;
    })

</script>